<template>
	<view>
		<view class="form-box">
			<view class="form-item">
				<view class="start-item-icon"></view>
				<input class="uni-input start-item-cnt" placeholder="从哪儿出发" v-model="formData.startPosition.showAddress" />
			</view>
			<view class="form-item">
				<view class="end-item-icon"></view>
				<input class="uni-input end-item-cnt" placeholder="你要去哪儿" v-model="formData.endPosition.showAddress" />
			</view>
			<view class="form-item2">
				<image src="@/static/img/client-trip/go-time.png" style="width: 26rpx; height: 26rpx;"></image>
				<picker mode="multiSelector" :range="timeList" range-key="txt" @change="timeChange"
					style="width: 100%;">
					<view class="show-txt">
						{{formData.preTimeStr ? formData.preTimeStr : '出发时间'}}
					</view>
				</picker>
			</view>
			<view class="form-item2" @click="toPersonCount">
				<image src="@/static/img/client-trip/renshu.png" style="width: 26rpx; height: 26rpx;"></image>
				<view class="show-txt">
					{{formData.personCountStr ? formData.personCountStr : '乘坐人数'}}
				</view>
			</view>
			<view class="form-item2" @click="toTripRemark">
				<image src="@/static/img/client-trip/trip-remark.png" style="width: 26rpx; height: 26rpx;"></image>
				<view class="show-txt">
					{{formData.remark ? formData.remark : '行程备注'}}
				</view>
			</view>
		</view>
		<view class="pre-price-box">
			预估价格<text class="pre-price-amt">{{formData.preAmount}}</text>元
			<image src="@/static/img/client-trip/pre-price.png" style="width: 34rpx; height: 34rpx;margin-left: 15rpx;">
			</image>
		</view>
		<view class="pre-btn" @click="toSubmitTrip">
			预约顺风车
		</view>
		<view v-if="showMaskBox"
			style="position: absolute; top: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);">
		</view>
		<view v-if="showPersonCountBox" class="person-cnt-box">
			<view style="height: 52rpx; display: flex;justify-content: space-between; align-items: center;">
				<view style="font-size: 38rpx; line-height: 52rpx;">乘车人数</view>
				<image src="@/static/img/close_x.png" style="width: 56rpx; height: 56rpx;" @click="closePersonCount">
				</image>
			</view>
			<view style="font-size: 25rpx; font-weight: 400; color: #999999; margin-top: 10rpx;">请如实填写儿童、婴幼儿人数</view>
			<view class="cnt-box" style="margin-top: 70rpx;">
				<view class="cnt-title">成人</view>
				<view class="cnt-btn">
					<image src="@/static/img/btn-sub.png" style="width: 50rpx; height: 50rpx;" @click="personCount.adultCount > 0 ? personCount.adultCount-- : ''"></image>
					<text>{{personCount.adultCount}}</text>
					<image src="@/static/img/btn-add.png" style="width: 50rpx; height: 50rpx;" @click="personCount.adultCount < 9 ? personCount.adultCount++ : ''"></image>
				</view>
			</view>
			<view class="cnt-box">
				<view class="cnt-title">儿童</view>
				<view class="cnt-btn">
					<image src="@/static/img/btn-sub.png" style="width: 50rpx; height: 50rpx;" @click="personCount.childrenCount > 0 ? personCount.childrenCount-- : ''"></image>
					<text>{{personCount.childrenCount}}</text>
					<image src="@/static/img/btn-add.png" style="width: 50rpx; height: 50rpx;" @click="personCount.childrenCount < 9 ? personCount.childrenCount++ : ''"></image>
				</view>
			</view>
			<view class="cnt-box">
				<view class="cnt-title">婴幼儿（四岁以下）</view>
				<view class="cnt-btn">
					<image src="@/static/img/btn-sub.png" style="width: 50rpx; height: 50rpx;" @click="personCount.infantCount > 0 ? personCount.infantCount-- : ''"></image>
					<text>{{personCount.infantCount}}</text>
					<image src="@/static/img/btn-add.png" style="width: 50rpx; height: 50rpx;" @click="personCount.infantCount < 9 ? personCount.infantCount++ : ''"></image>
				</view>
			</view>
			<view class="pre-btn" @click="selectedPersonCount">
				确认
			</view>
		</view>
		<view v-if="showRemarkBox" class="remark-box">
			<view style="height: 52rpx; display: flex;justify-content: space-between; align-items: center;">
				<view style="font-size: 38rpx; line-height: 52rpx;">行程备注</view>
				<image src="@/static/img/close_x.png" style="width: 56rpx; height: 56rpx;" @click="closeRemark">
				</image>
			</view>
			<view style="font-size: 25rpx; font-weight: 400; color: #999999; margin-top: 10rpx;">选择填写备注，便于车主提前准备</view>
			<input class="ipt-remark" v-model="formData.remark" placeholder="如：有宠物/有大件行李" placeholder-style="font-size: 33rpx;font-weight: 400;color: #999999;"/>
			<view class="pre-btn" @click="confirmRemark">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import {
		clientPublishTrip,
		getTripFee
		} from '@/api/api.js';
	
	const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	export default {
		data() {
			return {
				formData: {
					cityInner: true,
					startPosition:{
						showAddress:null
					},
					endPosition:{
						showAddress:null
					},
					preTime: null,
					preTimeStr: null,
					adultCount: 0,
					childrenCount: 0,
					infantCount: 0,
					personCountStr: null,
					remark: null,
					preDistance: 0,
					preAmount: 0.00
				},
				showMaskBox: false,
				showPersonCountBox: false,
				showRemarkBox: false,
				personTotal:0,
				personCount: {
					adultCount: 0,
					childrenCount: 0,
					infantCount: 0
				},
				timeList: this.initTimeList()
			}
		},
		onLoad() {
			// 读取缓存的行程数据
			this.initTripData();
		},
		methods: {
			initTimeList() {
				let timeArr = [
					[],
					[],
					[]
				];
				// 可预约天数 
				const preDays = 7;
				let nowTime = new Date();
				let tempTime = new Date();
				for (var i = 0; i < preDays; i++) {
					tempTime.setDate(nowTime.getDate() + i);
					console.log(tempTime)
					let year = tempTime.getFullYear();
					let month = tempTime.getMonth() + 1;
					let day = tempTime.getDate();
					let dateTxt = (month < 10 ? '0' + month : month) + '月' + (day < 10 ? '0' + day : day) + '日' + ' ' + weekDays[tempTime.getDay()];
					let dateValue = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
					timeArr[0].push({
						txt: dateTxt,
						value: dateValue
					});
				}
				for (var j = 0; j < 24; j++) {
					let hourTxt = (j < 10 ? '0' + j : j) + '点';
					let hourValue = (j < 10 ? '0' + j : j) + '';
					timeArr[1].push({
						txt: hourTxt,
						value: hourValue
					});
				}
				for (var k = 0; k < 60; k++) {
					let minuteTxt = (k < 10 ? '0' + k : k) + '分';
					let minuteValue = (k < 10 ? '0' + k : k) + '';
					timeArr[2].push({
						txt: minuteTxt,
						value: minuteValue
					});
				}

				return timeArr;
			},
			timeChange(e) {
				console.log(e)
				this.formData.preTimeStr = this.timeList[0][e.detail.value[0]].txt + ' ' +
					this.timeList[1][e.detail.value[1]].txt + ' ' +
					this.timeList[2][e.detail.value[2]].txt;

				this.formData.preTime = this.timeList[0][e.detail.value[0]].value + ' ' +
					this.timeList[1][e.detail.value[1]].value + ':' +
					this.timeList[2][e.detail.value[2]].value + 
					':00';
			},
			toPersonCount() {
				this.showMaskBox = true;
				this.showPersonCountBox = true;
			},
			closePersonCount() {
				this.showMaskBox = false;
				this.showPersonCountBox = false;
			},
			selectedPersonCount() {
				this.showMaskBox = false;
				this.showPersonCountBox = false;
				this.formData.adultCount = this.personCount.adultCount;
				this.formData.childrenCount = this.personCount.childrenCount;
				this.formData.infantCount = this.personCount.infantCount;
				
				this.personTotal = this.formData.adultCount + this.formData.childrenCount + this.formData.infantCount;
				if(this.personTotal > 0){
					this.formData.personCountStr = this.personTotal +
					'人' + 
					'（' +
					(this.formData.adultCount > 0 ? this.formData.adultCount + '大人' : '') +
					(this.formData.childrenCount > 0 ? ' ' + this.formData.childrenCount + '儿童' : '') +
					(this.formData.infantCount > 0 ? ' ' + this.formData.infantCount + '婴幼儿' : '') +
					'）';
				}
			},
			toTripRemark(){
				this.showMaskBox = true;
				this.showRemarkBox = true;
			},
			closeRemark(){
				this.showMaskBox = false;
				this.showRemarkBox = false;
			},
			confirmRemark(){
				this.showMaskBox = false;
				this.showRemarkBox = false;
			},
			initTripData(){
				let tripData = uni.getStorageSync('tripData');
				console.log('get行程数据：',tripData)
				this.formData.cityInner = tripData.cityInner;
				this.formData.preDistance = tripData.preDistance;
				this.formData.startPosition = tripData.startPosition;
				this.formData.endPosition = tripData.endPosition;
				
				// 计算费用
				this.getTripFee();
			},
			getTripFee(){
				let p = {
					cityInner: this.formData.cityInner,
					startProvince: this.formData.startPosition.province,
					startCity: this.formData.startPosition.city,
					startDistrict: this.formData.startPosition.district,
					startStreet: '',
					startDetail: '',
					startLatitude: this.formData.startPosition.latitude,
					startLongitude: this.formData.startPosition.longitude,
					startShowAddress: this.formData.startPosition.showAddress,
					startFullAddress: this.formData.startPosition.fullAddress,
					endProvince: this.formData.endPosition.province,
					endCity: this.formData.endPosition.city,
					endDistrict: this.formData.endPosition.district,
					endStreet: '',
					endDetail: '',
					endLatitude: this.formData.endPosition.latitude,
					endLongitude: this.formData.endPosition.longitude,
					endShowAddress: this.formData.endPosition.showAddress,
					endFullAddress: this.formData.endPosition.fullAddress,
					startTime: this.formData.preTime,
					personCntAdult: this.formData.adultCount,
					personCntChildren: this.formData.childrenCount,
					personCntInfant: this.formData.infantCount,
					remark: this.formData.remark,
					preDistance: this.formData.preDistance
				}
				getTripFee(p).then(res=>{
					if(res){
						this.formData.preAmount = res.data.totalAmount;
					}
				})
			},
			toSubmitTrip(){
				// 提交行程表单
				let p = {
					cityInner: this.formData.cityInner,
					startProvince: this.formData.startPosition.province,
					startCity: this.formData.startPosition.city,
					startDistrict: this.formData.startPosition.district,
					startStreet: '',
					startDetail: '',
					startLatitude: this.formData.startPosition.latitude,
					startLongitude: this.formData.startPosition.longitude,
					startShowAddress: this.formData.startPosition.showAddress,
					startFullAddress: this.formData.startPosition.fullAddress,
					endProvince: this.formData.endPosition.province,
					endCity: this.formData.endPosition.city,
					endDistrict: this.formData.endPosition.district,
					endStreet: '',
					endDetail: '',
					endLatitude: this.formData.endPosition.latitude,
					endLongitude: this.formData.endPosition.longitude,
					endShowAddress: this.formData.endPosition.showAddress,
					endFullAddress: this.formData.endPosition.fullAddress,
					startTime: this.formData.preTime,
					personCntAdult: this.formData.adultCount,
					personCntChildren: this.formData.childrenCount,
					personCntInfant: this.formData.infantCount,
					remark: this.formData.remark,
					preDistance: this.formData.preDistance
				}
				console.log('行程表单：', p);
				clientPublishTrip(p).then(res => {
					console.log('表单提交结果：', res);
					if(res && res.data){
						// 跳转到行程详情页
						uni.redirectTo({
							url: '/pages/xyqc/sfc/client/trip-detail?id='+res.data
						})
					}
				})
			}
		}
	}
</script>

<style>
	.form-box {
		padding: 30rpx;
		background: #FFFFFF;
	}

	.form-item {
		width: 100%;
		height: 87rpx;
		background: #F4F4F4;
		border-radius: 7rpx;
		display: flex;
		align-items: center;
		;
	}

	.form-item:not(:first-child) {
		margin-top: 15rpx;
	}

	.start-item-icon {
		width: 17rpx;
		height: 17rpx;
		background: #6FC65E;
		border-radius: 16rpx;
		margin-left: 40rpx;
	}

	.start-item-cnt {
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;

	}

	.end-item-icon {
		width: 17rpx;
		height: 17rpx;
		background: #EC7F2F;
		border-radius: 16rpx;
		margin-left: 40rpx;
	}

	.end-item-cnt {
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
	}

	.form-item2 {
		margin: 38rpx 0;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.show-txt {
		flex: 1;
		padding-left: 24rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.pre-price-box {
		height: 246rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
		border-radius: 21rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 83rpx 33rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.pre-price-amt {
		font-size: 50rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #333333;
		margin: 0 13rpx;
	}

	.pre-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 20rpx;
		height: 94rpx;
		background: #6FC65E;
		border-radius: 47rpx;
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.person-cnt-box {
		z-index: 9999;
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		width: 100%;
		height: 706rpx;
		background: #FFFFFF;
		border-radius: 21rpx 21rpx 0rpx 0rpx;
	}

	.cnt-box {
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.cnt-title {
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.cnt-btn {
		display: flex;
		justify-content: right;
		align-items: center;
		gap: 30rpx;
	}
	.remark-box{
		z-index: 9999;
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		width: 100%;
		height: 508rpx;
		background: #FFFFFF;
		border-radius: 21rpx 21rpx 0rpx 0rpx;
	}
	.ipt-remark{
		margin-top: 70rpx;
		height: 94rpx;
		width: 100%;
		background: #F4F4F4;
		border-radius: 47rpx;
		font-size: 33rpx;
		padding-left: 30rpx;
	}
</style>